<template>
  <commonformdialog
    :isshowDialogs="isshowDialog"
    :dialogTitle="dialogTitle"
    @closetextDialog="closeDialog"
    @confirmbtn='confirmbtn'
    :isshowFooter='false'
  >
    <div class="filearea">
       <div class="d-el-top">
              <div class="downloadbox clearfix">
                <div class="d-left-icon fl">
                  <img class="udicon" src="https://oss.juchehulian.com/_platform/normal/0apVJu1610091174.png" alt="">
                </div>
                <div class="d-right-desc fl">
                  <div class="d-right-title"><p>填写导入数据信息</p></div>
                  <div class="d-right-descs">
                    <p>请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除</p>
                  </div>
                  <div class="d-right-ddoc">
                    <a @click="dtem" :href="dowUrl">下载模板</a>
                  </div>
                </div>
              </div>
              <div class="uploadbox clearfix">
                <div class="d-left-icon fl">
                  <img class="udicon" src="https://oss.juchehulian.com/_platform/normal/ctzviR1610091284.png" alt="">
                </div>
                <div class="d-right-desc fl">
                  <div class="d-right-title"><p>上传填好的信息表</p></div>
                  <div class="d-right-descs">
                    <p>
                      文件后缀名必须为xls或xlsx
                      [即Excel格式],文件大小不得大于10M,最多支持导入3000条数据
                    </p>
                  </div>
                  <div class="d-right-ddoc">
                   <el-upload
                   class="upload-demo"
                   :action="baseURL+importUrl"
                   :headers="headersobj"
                   :show-file-list='false'
                   :before-upload='filechange'
                   :on-success='filsuccess'
                   >
                      <span>上传文件</span>
                    </el-upload>
                  </div>
                </div>
              </div>
<!--            <warning >
        <p>
          温馨提示：导入过程中如发现相同数据，则更新这条数据。
        </p>
      </warning> -->
            </div>
    </div>
  </commonformdialog>
</template>

<script>
import warning from '@/components/warnins'
import commonformdialog from '@/components/commondialog/commondialog'
import {getAccessToken} from '@/utils/accessToken'
import {baseURL} from '@/config/index'
export default {
  data() {
    return {
      baseURL,
      headersobj:{
          token:getAccessToken()
        },
    }
  },
  components: {
    commonformdialog,
    warning
  },
  mounted(){

  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: '',
      required: true,
    },
    //导入的url 接口
    importUrl:{
        type:String,
        default:''
    },
    //下载链接
    dowUrl:{
      type:String,
      default:''
    }
  },
  methods: {
    dtem(){
       this.$message.success('模板下载成功！')
    },
    closeDialog() {
      //重置表单
      this.$emit('closedialog')
    },
    confirmbtn(){

    },
    //上传时都会本触发
    filechange(file, fileList){
        let FileExt = file.name.replace(/.+\./, "").toLowerCase()
        let flag = ['doc','docx','xls','xlsx'].includes(FileExt)
        if(!flag){
            this.$emit('filerror')
            //阻止提交
            return false
        }
        //上传操作
        console.log('上传文件')

    },
    filsuccess(response, file, fileList){

      if(response.code=='0000'){
        this.$emit('uploadsuccess',response)
      }else{
        this.$message.error(response.msg)
      }
    }
  },
}
</script>

<style scoped lang='scss'>
.d-left-icon {
    width: 120px;
    height: 120px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .d-right-desc {
    box-sizing: border-box;
    .d-right-title {
      margin-left: 53px;
      margin-top: 20px;
      p {
        padding: 0;
        margin: 0;
        font-weight: 500;
        font-size: 16px;
        color: #303133;
      }
    }
    .d-right-descs {
      margin-top: 13px;
      color: #6f7683;
      margin-left: 53px;
      p{
        margin: 5px 0;
      }
    }
    .d-right-ddoc {
      font-size: 14px;
      font-weight: 500;
      color: #4c68ef;
      margin-top: 15px;
      margin-left: 53px;
      cursor: pointer;
    }
  }
  .downloadbox {
    border: 1px solid #e1e1e1;
  }
  .uploadbox {
    margin-top: 25px;
    border: 1px solid #e1e1e1;
    margin-bottom: 20px;
  }
  .alertbox {
    display: flex;
    padding: 26px;
    box-sizing: border-box;
    margin-top: 30px;
    background-color: #fdf5e8;
    .l-alerticon {
      margin-right: 10px;
    }
    .r-desc {
      p {
        font-size: 16px;
        color: #6f7683;
        font-weight: 500;
      }
      span {
        display: inline-block;
        margin-top: 8px;
        font-size: 14px;
        color: #6f7683;
      }
    }
  }
  .udicon{
    width: 45px;
    height: 45px;
  }
</style>
